/*!
 * Lazy Load - jQuery plugin for lazy loading images
 *
 * Copyright (c) 2007-2015 Mika Tuupola
 *
 * Licensed under the MIT license:
 *   http://www.opensource.org/licenses/mit-license.php
 *
 * Project home:
 *   http://www.appelsiini.net/projects/lazyload
 *
 * Version:  1.9.7
 *
 */

(function ($, window, document, undefined) {
    $.fn.lazyload = function (options) {
        var settings = {
            lazyclass: "lazy", //默认class
            callback: null,   //回调
            distance: 200   //默认距离
        };
        $.extend(settings, options);

        function updata() {
            var elements = $("." + settings.lazyclass);
            elements.each(function (i, o) {
                var istop = $(window).height() + $(window).scrollTop() > ($(o).offset().top - settings.distance);
                var isleft = $(window).width() + $(window).scrollLeft() > ($(o).offset().left - settings.distance);
                var isbottom = $(o).offset().top + $(o).height() + settings.distance > $(window).scrollTop();
                var isright = $(o).offset().left + $(o).width() + settings.distance > $(window).scrollLeft();
                if (istop && isbottom && isleft && isright) {
                    $(o).appear(settings.lazyclass, settings.callback);
                }
            });
        }

        $(window).bind('scroll', function () {
            updata();
        });
        $(window).bind('resize', function () {
            updata();
        });
        updata();
        return updata;
    };
    $.fn.appear = function (Class, callback) {
        var $that = this;
        if ($that.hasClass(Class)) {
            $that.removeClass(Class);
            var img = new Image();
            img.src = $that.attr("data-img");
            if (img.complete) {
                if ($that[0].nodeName === "IMG") {
                    $that.attr("src", $that.attr("data-img"));

                } else {
                    console.log($that);
                    $that.css("backgroundImage", 'url(' + $that.attr("data-img") + ')');
                }
                if(callback)callback($that);

            } else {
                $(img).bind("load", function () {
                    if ($that[0].nodeName === "IMG") {
                        $that.attr("src", $that.attr("data-img"));

                    } else {
                        console.log($that);
                        $that.css("backgroundImage", 'url(' + $that.attr("data-img") + ')');
                    }
                    if(callback)callback($that);
                });
            }

        }
    };
})(jQuery, window, document);


// (function($, window, document, undefined) {
//     var $window = $(window);
//
//     $.fn.lazyload = function(options) {
//         var elements = this;
//         var $container;
//         var settings = {
//             threshold       : 0,
//             failure_limit   : 0,
//             event           : "scroll.lazyload",
//             effect          : "show",
//             container       : window,
//             data_attribute  : "original",
//             data_srcset     : "srcset",
//             skip_invisible  : false,
//             appear          : null,
//             load            : null,
//             placeholder     : ""
//         };
//
//         function update() {
//             var counter = 0;
//
//             elements.each(function() {
//                 var $this = $(this);
//                 if (settings.skip_invisible && !$this.is(":visible")) {
//                     return;
//                 }
//                 if ($.abovethetop(this, settings)) {
//                     /* Nothing. */
//                 } else if (!$.belowthefold(this, settings)) {
//                     $this.trigger("appear");
//                     /* if we found an image we'll load, reset the counter */
//                     counter = 0;
//                 } else {
//                     if (++counter > settings.failure_limit) {
//                         return false;
//                     }
//                 }
//             });
//
//         }
//
//         if(options) {   //如果传入了配置对像，就扩展下
//             /* Maintain BC for a couple of versions. */
//             if (undefined !== options.failurelimit) {
//                 options.failure_limit = options.failurelimit;
//                 delete options.failurelimit;
//             }
//             if (undefined !== options.effectspeed) {
//                 options.effect_speed = options.effectspeed;
//                 delete options.effectspeed;
//             }
//
//             $.extend(settings, options);
//         }
//
//         /* Cache container as jQuery as object. */  //如果传入了容器对象就是容器对象 否则就是window对象
//         $container = (settings.container === undefined ||
//             settings.container === window) ? $window : $(settings.container);
//
//         /* Fire one scroll event per scroll. Not one scroll event per image. */
//         if (0 === settings.event.indexOf("scroll")) {  //看看是否传入了scroll属性 传入了就绑定scroll事件
//             $container.off(settings.event).on(settings.event, function() {
//                 return update();
//             });
//         }
//
//         this.each(function() {  //给每一个懒加载对象添加一个属性loaded 默认为false 没加载完成
//             var self = this;
//             var $self = $(self);
//
//             self.loaded = false;
//
//             /* If no src attribute given use data:uri. */
//             if ($self.attr("src") === undefined || $self.attr("src") === false) {
//                 if ($self.is("img")) {   //给每一个懒加载对象添加默认图片
//                     $self.attr("src", settings.placeholder);
//                 }
//             }
//
//             /* When appear is triggered load original image. */
//             $self.one("appear", function() {  //给每个懒加载对象绑定一个自定义事件
//                 if (!this.loaded) {      //如果没加载
//                     if (settings.appear) { //如果传入了回调就执行回调
//                         var elements_left = elements.length;  //重新将没加载的对象赋值
//                         settings.appear.call(self, elements_left, settings); //执行回调把自身传入，把所有的没加载完的对象传入，把设置传入
//                     }
//                     $("<img />")  //创建一个图片对象绑定加载事件;
//                         .one("load", function() {
//                             var original = $self.attr("data-" + settings.data_attribute);
//                             var srcset = $self.attr("data-" + settings.data_srcset);
//
//                             if (original != $self.attr("src")) {
//                                 $self.hide();
//                                 if ($self.is("img")) {
//                                     $self.attr("src", original);
//                                     if (srcset != null) {
//                                         $self.attr("srcset", srcset);
//                                     }
//                                 } if ($self.is("video")) {
//                                     $self.attr("poster", original);
//                                 } else {
//                                 }
//                                 $self[settings.effect](settings.effect_speed); //以什么方式展示 可以是show 也可以是fedeIn
//                             }
//
//                             self.loaded = true;
//
//                             /* Remove image from array so it is not looped next time. */
//                             var temp = $.grep(elements, function(element) { //过滤下没有加载完成的图片
//                                 return !element.loaded;
//                             });
//                             elements = $(temp);
//
//                             if (settings.load) { //如果传入了加载完成回调就执行回调
//                                 var elements_left = elements.length;
//                                 settings.load.call(self, elements_left, settings);
//                             }
//                         })
//                         .attr({  //为这个图片对象添加src 这样这张图片才会有加载完成事件
//                             "src": $self.attr("data-" + settings.data_attribute),
//                             "srcset": $self.attr("data-" + settings.data_srcset) || ""
//                         });
//                 }
//             });
//
//             /* When wanted event is triggered load original image */
//             /* by triggering appear.                              */
//             if (0 !== settings.event.indexOf("scroll")) { //如果传入的事件类型不是srcoll 就绑定这个事件
//                 $self.off(settings.event).on(settings.event, function() {
//                     if (!self.loaded) {
//                         $self.trigger("appear");
//                     }
//                 });
//             }
//         });
//
//         /* Check if something appears when window is resized. */
//         $window.off("resize.lazyload").bind("resize.lazyload", function() { //就是resize事件
//             update();
//         });
//
//         /* With IOS5 force loading images when navigating with back button. */
//         /* Non optimal workaround. */
//         if ((/(?:iphone|ipod|ipad).*os 5/gi).test(navigator.appVersion)) { //在safari中 后退按钮点击不触发$(function)可能图片就不会出来,只能用这个方法代替
//             $window.on("pageshow", function(event) {
//                 if (event.originalEvent && event.originalEvent.persisted) {
//                     elements.each(function() {
//                         $(this).trigger("appear");
//                     });
//                 }
//             });
//         }
//
//         /* Force initial check if images should appear. */
//         $(function() {
//             update();
//         });
//
//         return this;
//     };
//
//     /* Convenience methods in jQuery namespace.           */
//     /* Use as  $.belowthefold(element, {threshold : 100, container : window}) */
//
//     $.belowthefold = function(element, settings) {
//         var fold;
//         if (settings.container === undefined || settings.container === window) {
//             fold = (window.innerHeight ? window.innerHeight : $window.height()) + $window.scrollTop();
//         } else {
//             fold = $(settings.container).offset().top + $(settings.container).height();
//         }
//
//         return fold <= $(element).offset().top - settings.threshold;
//     };
//
//     $.rightoffold = function(element, settings) {
//         var fold;
//
//         if (settings.container === undefined || settings.container === window) {
//             fold = $window.width() + $window.scrollLeft();
//         } else {
//             fold = $(settings.container).offset().left + $(settings.container).width();
//         }
//
//         return fold <= $(element).offset().left - settings.threshold;
//     };
//
//     $.abovethetop = function(element, settings) {
//         var fold;
//
//         if (settings.container === undefined || settings.container === window) {
//             fold = $window.scrollTop();
//         } else {
//             fold = $(settings.container).offset().top;
//         }
//
//         return fold >= $(element).offset().top + settings.threshold  + $(element).height();
//     };
//
//     $.leftofbegin = function(element, settings) {
//         var fold;
//
//         if (settings.container === undefined || settings.container === window) {
//             fold = $window.scrollLeft();
//         } else {
//             fold = $(settings.container).offset().left;
//         }
//
//         return fold >= $(element).offset().left + settings.threshold + $(element).width();
//     };
//
//     $.inviewport = function(element, settings) {
//         return !$.rightoffold(element, settings) && !$.leftofbegin(element, settings) &&
//             !$.belowthefold(element, settings) && !$.abovethetop(element, settings);
//     };
//
//     /* Custom selectors for your convenience.   */
//     /* Use as $("img:below-the-fold").something() or */
//     /* $("img").filter(":below-the-fold").something() which is faster */
//
//     $.extend($.expr[":"], {
//         "below-the-fold" : function(a) { return $.belowthefold(a, {threshold : 0}); },
//         "above-the-top"  : function(a) { return !$.belowthefold(a, {threshold : 0}); },
//         "right-of-screen": function(a) { return $.rightoffold(a, {threshold : 0}); },
//         "left-of-screen" : function(a) { return !$.rightoffold(a, {threshold : 0}); },
//         "in-viewport"    : function(a) { return $.inviewport(a, {threshold : 0}); },
//         /* Maintain BC for couple of versions. */
//         "above-the-fold" : function(a) { return !$.belowthefold(a, {threshold : 0}); },
//         "right-of-fold"  : function(a) { return $.rightoffold(a, {threshold : 0}); },
//         "left-of-fold"   : function(a) { return !$.rightoffold(a, {threshold : 0}); }
//     });
//
// })(jQuery, window, document);